<template>
  <div>
    <!-- -->
    <h1 id="box" ref="fcom">父组件</h1>
    <h1>我是父组件的数据：{{fdata}}</h1>
    <!-- 父组件通过子组件定义的props 然后在通过v-bind传动态数据 
    vue 属性值 如果要 number和布尔 要加v-bind : -->
    <order-son :myage="88" :myname="zname" :list="mylist" ref="mySon"
     @sendData="getData" @ldata="getMsg"></order-son>
     <hr>
     <h1>{{mysonname}}</h1>
     <h1>{{myzdata}}</h1>
     <h1>{{myztitle}}</h1>
     <h1 v-for="item in myzlist" :key="item">{{item}}</h1>
  </div>
</template>

<script>
import orderSon from './orderSon.vue'
export default {
  name: '2209vueIndex',
  components:{
    orderSon
  },
  data() {
    return {
      fdata:"我是吕布",
      zname:"曹操",
      mylist:["诸葛亮","刘备","张飞","关羽"],
      myzdata:"",
      myztitle:"",
      myzlist:[],
      mysonname:""
    };
  },

  mounted() {
    //  let box=document.querySelector("#box");
    //  ref 可以获取dom元素 和子组件
    // 在标签或组件上 用ref="名字"
    // 获取 this.$refs.名字
     let fcom=this.$refs.fcom;
     console.log(fcom)
     fcom.style.background="red";

    //  用ref获取组件
    let mySon=this.$refs.mySon;
    console.log(mySon)
    // 使用和改变子组件的数据
    mySon.msg="今天星期一"
    console.log(mySon.msg)
    // 访问子组件的方法 并传数据
    // ref 也是组件通讯的一种，父传子
    mySon.say("小米汽车");
  },

  methods: {
    // 父组件自定义事件函数的形参 就是子组件传递来的参数
    // 形参的顺序和this.$emit里的顺序一致
    getData(a,b,c){
      this.myzdata=a;
      this.myztitle=b;
      this.myzlist=c;
    },
    getMsg(zname){
      this.mysonname=zname;
    }
  },
};
</script>